<template>
  <div class="main-content">
    <div class="TfullTable">
      <el-button type="primary" class="initData" size="large" @click="visible = true">初始化数据</el-button>
      <div class="flex typeLogo justify-between">
        <div v-for="(item,index) in colorBox" :key="index" class="flex align-center">
          <div
            :style="{background:item.color,width:'40px',height:'20px'}"
            class="margin-right-xs colorBox"
          ></div>
          <div>{{item.name}}</div>
        </div>
      </div>
      <FullCalendar @edit="edit" :events="tableList" ref="fullLabel"/>
    </div>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="日期" prop="workDate">
          <el-date-picker
            v-model="form.workDate"
            type="date"
            placeholder="请输入日期"
            value-format="YYYY-MM-DD"
            :style="{width: '100%'}"
            clearable
            disabled
          />
        </el-form-item>
        <el-form-item label="星期" prop="week">
          <el-input v-model="form.week" placeholder="请输入星期" disabled/>
        </el-form-item>
        <el-form-item label="日期类型">
          <el-radio-group v-model="form.dateType">
            <el-radio label="1">工作日</el-radio>
            <el-radio label="2">休息日</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="初始化数据"
      v-model="visible"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="年份">
          <el-select v-model="date" placeholder>
            <el-option v-for="item in options" :key="item.id" :label="item.date" :value="item.date"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm2">确 定</el-button>
          <el-button @click="visible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from "./compontent/index.vue";
import api from "@/api";
import { parseTimeDate } from "@/utils/index.js";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      date: "2022",
      options: [
        { id: "1", date: "2020" },
        { id: "2", date: "2021" },
        { id: "3", date: "2022" },
        { id: "4", date: "2023" },
        { id: "5", date: "2024" },
        { id: "6", date: "2025" }
      ],
      colorBox: [
        { name: "工作日", color: "rgb(242, 63,72,1)" },
        { name: "休息日", color: "#2AA8F8" }
      ],
      tableList: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "工作日设置",
      // 是否显示弹出层
      open: false,
      visible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        date: [
          {
            required: true,
            message: "日期不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created(){
    this.getList();
  },
  methods: {
    /**获取列表数据 */
    getList() {
      api.workDay.list().then(res => {
        if (res.code) {
          //设置列表数据
          this.tableList = res.rows.map(label => {
            let Tlabel = {
              title:
                label.dateType == "2" && !label.remark
                  ? "休息日"
                  : label.dateType == "1" && !label.remark
                  ? "工作日"
                  : label.remark,
              color:
                label.dateType == "2"
                  ? "#2aa8f8"
                  : label.dateType == "1"
                  ? "rgb(242, 63,72,1)"
                  : "rgb(61, 212, 167)",
              textColor: "#fff",
              id: label.id,
              start: parseTimeDate(label.pworkDate),
              end: parseTimeDate(label.pworkDate)
            };
            return Tlabel;
          });
          this.$refs.fullLabel.calendarOptions.events = this.tableList;
          this.$refs.fullLabel.fullShow = true;
        } else {
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.form = {};
    },
    /** 新增按钮操作 */
    add() {
      this.open = true;
    },
    /** 修改按钮操作 */
    edit(row) {
      api.workDay
        .editId(row.id)
        .then(response => {
          if (response.data.week == "1") {
            response.data.week = "一";
          } else if (response.data.week == "2") {
            response.data.week = "二";
          } else if (response.data.week == "3") {
            response.data.week = "三";
          } else if (response.data.week == "4") {
            response.data.week = "四";
          } else if (response.data.week == "5") {
            response.data.week = "五";
          } else if (response.data.week == "6") {
            response.data.week = "六";
          } else if (response.data.week == "7") {
            response.data.week = "日";
          }
          this.form = response.data;
          this.open = true;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            api.workDay
              .edit(this.form)
              .then(response => {
                this.$message.success(response.msg);
                this.open = false;
                this.tableList = [];
                this.$refs.fullLabel.calendarOptions.events = [];
                this.$refs.fullLabel.fullShow = false;
                this.getList();
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          } else {
            api.workDay
              .add(this.form)
              .then(response => {
                this.$message.success(response.msg);
                this.open = false;
                this.tableList = [];
                console.log(this.$refs.fullLabel);
                this.$refs.fullLabel.calendarOptions.events = [];
                this.$refs.fullLabel.fullShow = false;
                setTimeout(() => {
                  this.getList();
                }, 2000);
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
          }
        }
      });
    },
    submitForm2() {
        var form = new FormData();
        form.append("year", this.date);
      api.workDay.initList(form).then(res => {
        if (res.code == 200) {
          console.log(this.$refs.fullLabel);
          this.$refs.fullLabel.calendarOptions.gotoDate(`${this.date}-01-01`)
          this.$refs.fullLabel.calendarOptions.events = [];
          // this.$refs.fullLabel.fullShow = false;
          this.getList();
          this.visible = false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.typeLogo {
  position: relative;
  top: 10px;
  left: 85%;
  width: 220px;
  height: 30px;
  .colorBox {
    border-radius: 3px;
  }
}
.initData {
  position: relative;
  top: 38px;
  left: 28%;
  height: 37px;
}
.main-content {
  width: 100%;
  height: 90%;
  // overflow-y: auto;
  background: #fff;
  padding: 0 10px;
}
/deep/.fc .fc-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: -30px;
}
/deep/.fc-toolbar-chunk:nth-child(3) {
  margin-left: 50px;
}
.TfullTable {
  /deep/.fc-toolbar-title {
    color: #276de9;
  }
  /deep/.fc-button-primary {
    background: #276de9;
    border-color: #276de9;
  }
  /deep/ .fc-today-button {
    background: #2c3e50;
    border-color: #ffff;
  }
}
/deep/.fc .fc-scrollgrid-liquid {
  height: 55%;
}
/deep/.fc-scrollgrid-sync-table {
  height: 635px;
}
</style>
